<!--
 * @version: 
 * @Author: yu
 * @Date: 2023-06-19 14:56:23
 * @LastEditors: Andy
 * @LastEditTime: 2023-07-04 18:50:13
-->
<template>
    <div class="container">
        <div class="echarts" ref="main" id="main"></div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    data() {
        return {}
    },
    methods: {
        //主要地区农作物增长趋势发起请求
        requestWth() {
            this.$axios.get('/api/CropGrowthTrend').then(res => {
                // console.log(res);
                if (res.status === 200) {
                    //获取年份
                    const month = res.data[0].content.map(item => item.month)
                    const seriesData = res.data.map(item => {
                        var areaData = item.content.map(i => i.area)
                        return {
                            type: 'line',
                            name: item.city,
                            data: areaData,
                            smooth: true,   //是否显示平滑曲线
                        }
                    })
                    this.option = {
                        title: {
                            text: '主要地区农作物增长趋势',
                            left: 10,
                            top: 15
                        },
                        grid: {
                            left: '15%',
                            top: '30%',
                            // button:'0%'
                        },
                        xAxis: {  //类目轴
                            type: 'category',
                            data: month,
                            boundaryGap: false  //坐标轴两边留白策略
                        },
                        yAxis: {
                            type: 'value',  //非类目轴
                            axisLine: { show: true }
                        },

                        series: seriesData,


                        legend: {  //图例组件
                            show: true,
                            icon: 'circle',  //图列为圆
                            left: '5%',
                            top: '15%'
                        },

                    }

                    this.myEschars.setOption(this.option)
                }

            })
        },
        screen() {
            this.myEschars.resize()
            const width = document.getElementById('main').offsetWidth;
            const num = width / 100 * 3.5;
            this.option = {
                title: {
                    textStyle: { fontSize: num }
                }
            }
            this.myEschars.setOption(this.option)
        },
        init() {
            const oDiv = this.$refs.main
            this.myEschars = this.$echarts.init(oDiv,this.theme)
        }
    },
    mounted() {
        this.init()

        //主要地区农作物增长趋势发起请求
        this.requestWth()
        // this.screen()
        window.addEventListener('resize', this.screen)
    },
    deactivated() {
        window.removeEventListener('resize', this.screen)
    },
    watch: {
        theme() {
            this.myEschars.dispose()
            this.init()
            this.requestWth()
        }
    },
    computed: {
        ...mapGetters({
            theme: 'home/theme'
        })
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>